<template>
  <div>
    <el-card>
      <div slot="header">
        <el-page-header @back="goBack" content="车位添加"></el-page-header>
      </div>
      <div>
        <el-form ref="form" :model="form" label-width="7rem" class="form">
          <el-form-item label="车位所属区域">
            <el-cascader
              class="input-field"
              v-model="form.region"
              :options="regionDivide"
              @change="cascaderHandleChange"
            >
            </el-cascader>
            <el-link class="link" type="warning" @click="before_updateRegion"
              >区域选项有问题</el-link
            >
          </el-form-item>
          <el-form-item label="车位号">
            <el-input v-model="form.idCode" class="input-field"></el-input>
          </el-form-item>
          <el-form-item label="车位大小">
            <el-select
              v-model="form.size"
              placeholder="placeholder"
              class="input-field"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="item of size"
                :key="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="车位属性">
            <el-form
              ref="form2"
              :model="form"
              label-width="80px"
              :inline="true"
            >
              <el-form-item label="人防车位" class="inline-item">
                <el-switch v-model="form.isCivilDefense"></el-switch>
              </el-form-item>
            </el-form>
          </el-form-item>

          <el-form-item label="初始价格">
            <el-input v-model="form.originPrice" class="input-field"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-group">
          <el-button type="primary" class="submit-btn" @click="add"
            >提交</el-button
          >
          <el-button type="success">批量导入</el-button>
        </div>
      </div>
    </el-card>

    <el-dialog
      title="修改区划"
      :visible.sync="dialogVisible"
      width="width"
      :before-close="dialogBeforeClose"
    >
      <div>
       
        <el-tree
          :data="data"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span
            class="custom-tree-node"
            style="width: 100%; display: flex; justify-content: space-between"
            slot-scope="{ node, data }"
          >
            <input
              type="text"
              @blur="blur(data)"
              v-if="data.showInput"
              v-model="currentName"
              style="flex: 1; border: 0px; outline: none"
            />
            <span @click="update(data)" v-else style="flex: 1">{{
              node.label
            }}</span>
            <span>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-plus"
                @click="() => append(data)"
              >
              </el-button>
              <el-button
                icon="el-icon-minus"
                type="text"
                size="mini"
                @click="() => remove(node, data)"
              >
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateRegion">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let id = 1000;

var clearEmptyArray = function (obj) {
  //我拿到的必然是一个child数组 或者 对象
  //如果拿到的是一个数组，那必然长度大于0
  console.log("before", obj);
  if (obj instanceof Array) {
    if (obj.length == 0) {
      console.log("cleaning!");
      obj = undefined;
    } else {
      for (let j in obj) {
        clearEmptyArray(obj[j]);
      }
    }
  } else {
    for (let i in obj) {
      //遍历对象的属性，如果是数组
      if (obj[i] instanceof Array) {
        if (obj[i]) clearEmptyArray(obj[i]);
        //如果是对象就跳过
      }
    }
  }
};

import { mapState } from "vuex";
let del_help = function (obj,that) {
  console.log('obj',obj)
  if (obj.children) {
    if (obj.children.length == 0) {
      that.$delete(obj, "children");
    } else {
      for (let i of obj.children) {
        del_help(i,that);
      }
    }
  }
};
export default {
  mounted(){
    this.data = this.getRegion()
  },
  computed: {
    ...mapState(["region_devide"]),
    regionDivide() {
      console.log(this.data)
      let res = JSON.parse(
        JSON.stringify(this.data)
      );
      del_help(res[0],this);
      return res[0].children;
    },
  },
  methods: {
    add(){
      console.log(this.form)
      this.$store.commit('add_park_info',this.form)
      this.$router.go(-1)
    },
    before_updateRegion() {
      this.dialogVisible = !this.dialogVisible;
      //1.获得规划信息,并初始化
      console.log(this.getRegion());
      this.data = this.getRegion();
    },
    getRegion() {
      if (this.region_devide.length == 0) {
        let t = [
          {
            id: "a",
            label: "车位规划",
            value: "车位规划",
            showInput: false,
            children: [],
          },
        ];
        this.$store.commit("set_region_devide", t);
        return t;
      } else {
        return this.region_devide;
      }
    },
    updateRegion() {
      console.log(this.data);
      this.dialogVisible = !this.dialogVisible;
    },

    closeDialog() {
      this.dialogVisible = !this.dialogVisible;
    },
    show() {
      console.log(this.data);
    },
    blur(data) {
      data.showInput = !data.showInput;
      data.label = this.currentName;
      data.value = data.label;
      this.currentName = "";
    },
    update(data) {
      data.showInput = !data.showInput;
      this.currentName = data.label;
    },
    append(data) {
      const newChild = {
        id: String(id++),
        label: "新建区划",
        value: "新建区划",
        children: [],
        showInput: false,
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
    },
    beforeUpdate(data) {
      data.showInput = !data.showInput;
      data.label = this.currentName;
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    cascaderHandleChange() {},
    dialogBeforeClose() {},
    goBack() {
      this.$router.go(-1);
    },
    change() {},
  },
  data() {
    const data = [
      {
        id: "a",
        label: "车位规划",
        value: "车位规划",
        showInput: false,
        children: [],
      },
    ];
    return {
      currentName: "",
      showInput: false,
      dialogVisible: false,
      data: data,
      defaultProps: {
        children: "children",
        label: "label",
      },
      size: ["标准", "豪华", "字母"],
      form: {
        region: [],
        idCode: "",
        size: "",
        isCivilDefense: false,
        isUnderground: true,
        orignPrice: 0.0,
      },
    };
  },
};
</script>

<style scoped>
.form {
  width: 80%;
  margin: auto;
}
.form .input-field {
  width: 80%;
  flex-shrink: 1;
}

.inline-item {
  margin: 0rem 2rem;
}
.link {
  margin-left: 1rem;
}
.btn-group {
  margin-top: 5rem;

  display: flex;
  justify-content: center;
}
.submit-btn {
  max-width: 300px;
  width: 40%;
}
</style>